<template>
    <div>


 <el-header ><h3>服务订单</h3></el-header>
 <br />
    <el-input type="text" v-model="key" placeholder="请输入服务" style="width:250px"></el-input>&nbsp;
     <el-button type="primary"  @click="find()">搜索</el-button><br>
 <br />

        <el-table  :row-class-name="tableRowClassName"
      :data="tableData"
      height="550"
      border
      style="width: 100%">
       <el-table-column type="expand">

            <template slot-scope="props">
              <el-form label-position="left" inline class="demo-table-expand">
                <el-form-item label="订单编号">
                  <span>{{ props.row.orderno }}</span>
                </el-form-item>
                <el-form-item label="商家">
                  <span>{{ props.row.serviceMerchant.name }}</span>
                </el-form-item>
                <el-form-item label="服务名称">
                  <span>{{ props.row.serviceItem.name}}</span>
                </el-form-item>
                <el-form-item label="服务类型">
                  <span>{{ props.row.serviceItem.type}}</span>
                </el-form-item>
                <el-form-item label="备注">
                  <span>{{ props.row.content }}</span>
                </el-form-item>
                <el-form-item label="预约时间">
                  <span>{{ props.row.appointmentTime }}</span>
                </el-form-item>
                <el-form-item label="下单时间">
                  <span>{{ props.row.ordertime }}</span>
                </el-form-item>
                <el-form-item label="服务地点">
                  <span>{{ props.row.appointmentAddress }}</span>
                </el-form-item>
                <el-form-item label="服务介绍">
                  <span>{{ props.row.serviceItem.introduce }}</span>
                </el-form-item>
                <el-form-item label="订单价格">
                  <span>{{ props.row.price }}</span>
                </el-form-item>

              </el-form>
            </template>
          </el-table-column>


      </el-table-column>
          <el-table-column
        prop="serviceItem.name"
        label="服务名称"

        align="center">
      </el-table-column>
      </el-table-column>
          <el-table-column
        prop="serviceItem.type"
        label="服务类型"

        align="center">
      </el-table-column>
      <el-table-column
        prop="content"
        label="备注"
        align="center">
      </el-table-column>
      <el-table-column
        prop="appointmentTime"
        label="预约时间"

        align="center">
      </el-table-column>

        <el-table-column
        prop="appointmentAddress"
        label="服务地点"

        align="center">
      </el-table-column>
        <el-table-column
        prop="price"
        label="服务价格"

        align="center">
      </el-table-column>
      <el-table-column
         label="状态"
        align="center"
        >
        <template slot-scope="scope">
          <span v-if="scope.row.status==1" style="color:SteelBlue"><b>已接单</b></span>
          <span v-if="scope.row.status==0" style="color:grey"><b>未接单</b></span>
          <span v-if="scope.row.status==2" style="color:green"><b>已完成</b></span>
           <span v-if="scope.row.status==3" style="color:red"><b>已取消</b></span>
          </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        width="100">

        <template slot-scope="scope">
           <span v-if="scope.row.status==2||scope.row.status==3">
          <el-button type="success" size="mini" @click="del(scope)" style="width:35">删除</el-button>
          </span>
            <span v-if="scope.row.status==0">
         <el-button type="warning" size="mini"  @click="cancel(scope)" style="width:35">取消</el-button>
         </span>
         <span v-if="scope.row.status==1">
          <!-- <el-button type="primary" size="mini" @click="confirm(scope)" style="width:35">确认支付</el-button> -->
           <el-button type="primary" size="mini" @click="pay(scope)" style="width:35">确认支付</el-button>
         <!-- <el-button type="warning" size="mini"  @click="cancel(scope)" style="width:35">取消</el-button> -->
         </span>
        </template>
      </el-table-column>
    </el-table>


    </div>
</template>

<script>

// import Index from './Index.vue'
export default {
  // components: { Index },
         data() {
           return{
            typeData:[],
           tableData:[],
           serviceOrder:{
            id:"",
            username:"",
            cid:"",
            iid:"",
            content:"",
            appointmentTime:"",
            aoopintmnetAddress:"",
            appointmentTimedate:"",
            status:"",
            price:"",
            community:"",
            orderno:""
           },
           current:{},
           dialogVisible:false,
           key:""

      }
    },
    methods:{
      tableRowClassName({row, rowIndex}) {
              if (rowIndex%2 === 1) {
                return 'warning-row';
              } else if (rowIndex%2 === 0) {
                return 'success-row';
              }
              return '';
            },
        


      // 搜索
      find:function(){
        // alert(this.key)
      this.$axios.get("http://localhost:8080/serviceorder/findUserOrderbycontent/"+this.key).then(res=>{
        if(res.data.status=="200"){
          console.log("开心，查到了")
          this.tableData=res.data.data
        }
      })
      },
      //暂时没有用
      confirm:function(scope){
        this.serviceOrder=scope.row
        this.$axios.post("http://localhost:8080/serviceorder/confirm",this.serviceOrder).then(res =>{
             if(res.data.status=="SUCCESS"){
                // 重新加载，刷新页面
              this.$axios.get("http://localhost:8080/serviceorder/findall").then(res =>{
              this.tableData = res.data.data
      })
             }

      })
      },
      pay:function(scope){
        this.serviceOrder=scope.row
      // alert(this.serviceOrder.id)
      location.href="http://localhost:8080/order/pay?id="+ this.serviceOrder.id
      },
      cancel:function(scope){
            this.serviceOrder=scope.row
              this.$axios.get("http://localhost:8080/service/order/cancel/"+this.serviceOrder.id).then(res =>{
             if(res.data.code=="200"){
              // 重新加载，刷新页面
              this.$axios.get("http://localhost:8080/service/order/findAll").then(res =>{
              this.tableData = res.data.data

      })
             }

      })
      },
      del:function(scope){
            this.serviceOrder=scope.row
              this.$axios.get("http://localhost:8080/service/order/del/"+this.serviceOrder.id).then(res =>{
             if(res.data.code=="200"){
              // 重新加载，刷新页面
              this.$axios.get("http://localhost:8080/service/order/findAll").then(res =>{
              this.tableData = res.data.data

      })
             }

      })
      },
    },
      mounted(){
       console.log(JSON.parse(sessionStorage.getItem("user")).username)
      this.$axios.get("http://localhost:8080/service/order/findAll/"+JSON.parse(sessionStorage.getItem("user")).username).then(res =>{
        console.log("fanhui")
         console.log(res.data)//ResponseResult
        console.log(res.data.data)
        this.tableData = res.data.data

      })
  this.$axios.get("http://localhost:8080/service/type/findall").then(res =>{
         console.log(res.data)//ResponseResult
        console.log(res.data.data)
        this.typeData = res.data.data

      })

    }

}
</script>

<style>
   .el-table .warning-row {
      background: oldlace;
    }
    .el-header, .el-footer {
        background-color: #B3C0D1;
        color: #333;
        text-align: center;
        line-height: 60px;
      }

    .el-table .success-row {
      background: #f0f9eb;
    }
     .demo-table-expand {
        font-size: 0;
      }
      .demo-table-expand label {
        width: 90px;
        color: #99a9bf;
      }
      .demo-table-expand .el-form-item {
        margin-right: 0;
        margin-bottom: 0;
        width: 50%;
      }
      .el-dropdown-link {
          cursor: pointer;
          color: #409EFF;
        }
        .el-icon-arrow-down {
          font-size: 12px;
        }
</style>
